<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/web.css" />
  </head>

  <body class="backbox">
    <!-- Background for the phone -->
    <div class="background"></div>
    <div class="head wrapper">
      <img src="picture/let-me-help-you.jpg" class="logo" />
      <div class="nav">
        <ul>
          <li class="headani"><a href="index.html">Home</a></li>
          <li class="headani"><a href="trolley.html">Shopping Trolley</a></li>
          <li class="headani"><a href="#">Contact us</a></li>
        </ul>
      </div>
    </div>

    <div class="header2">
      <div style="height: 50px; background-color: #000000; text-align: right;">
          <img src="picture/header2.webp" style="object-fit: contain; height: 50px;" id="header2pic">
      </div>
      <ul class="headernav">
          <li><a href="index.html">Home</a></li>
          <li><a href="trolley.html">Shopping Trolley</a></li>
          <li><a href="#">Contact us</a></li>
      </ul>
  </div>

    <!-- to the top -->
    <div class="totop">
      <!-- <img src="picture\jbc.jpg" alt="to the top"> -->
      <a href="#"
        ><img src="picture/jbc.jpg" alt="to the top" class="totopimg"
      /></a>
      <p>TOP</p>
    </div>

    <div class="trotitle">Shopping Trolley</div>
    <!-- Blank -->
    <div class="useless"></div>
	<div class="trolley_content">

	</div>
    <div class="tro tro5" id="1">
      <img src="picture/xiyou.jpg" class="tropic" />
      <span class="title"> The Journey to the West </span>
      <div>
        <span>Number</span>
        <span
          ><select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
          </select></span
        >
      </div>
      <span id="101"> Delete </span>
    </div>
    <br />

    <div class="tro tro5" id="2" >
      <img src="picture/honglou.jpg" class="tropic" />
      <span class="title"> A Dream of Red Mansions </span>
      <div>
        <span>Number</span>
        <span
          ><select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
          </select></span
        >
      </div>
      <span id="201"> Delete </span>
    </div>
    <br />

    <div class="tro tro5" id="3">
        <img src="picture/shuihu.jpg" class="tropic" />
      <span class="title">Water Margin</span>
      <div>
        <span>Number</span>
        <span
          ><select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
          </select></span
        >
      </div>
      <span id="301">Delete</span>
    </div>
    <br />

    <div class="tro tro5" id="4">
        <img src="picture/sanguo.jpg" class="tropic" />
      <span class="title">
        Romance of the Three KingdomsThe Three Kingdoms Era
      </span>
      <div>
        <span>Number</span>
        <span
          ><select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
          </select></span
        >
      </div>
      <span id="401">Delete</span>
    </div>
    <br />

    <!-- go to the payment -->
    <div class="gotopay" id="gotopay">
      <div style="font-size: 24px;">Pay</div>
    </div>

    <script src="js/trolley.js"></script>
    <script src="js/web.js"></script>
  </body>
</html>
